﻿@namespace Aspire.Dashboard.Components.Controls

@using Aspire.Dashboard.Resources
@using Aspire.Dashboard.Utils
@using System.Globalization
@using Aspire.Dashboard.Components.Controls.Grid

@inherits Aspire.Dashboard.Components.Controls.Chart.ChartBase

@{
    // these colors line up with P50/P90/P99 colors for the plotly graph
    var percentileColumns = new List<(int Percentile, string UnderlineColor)> { (50, "#89B5D3"), (90, "#F9B980"), (99, "#8FC98F") };
    var columnCount = ShowPercentiles() ? percentileColumns.Count + 1 : 2;
    if (_exemplars.Count > 0)
    {
        columnCount++;
    }
}

<div id="metric-table-container" style="height: 40vh; overflow-y: auto; width:1200px;">
    @* ItemKey is to preserve row focus by associating rows with their associated time *@
    <FluentDataGrid
        Items="@_metricsView"
        ItemSize="46"
        Virtualize="true"
        GridTemplateColumns="@string.Join(" ", Enumerable.Repeat("1fr", columnCount))"
        ItemKey="@(item => item.DateTime)">
        <ChildContent>
            <TemplateColumn Title="@Loc[nameof(ControlsStrings.MetricTableStartColumnHeader)]" TooltipText="@(context => FormatHelpers.FormatDateTime(TimeProvider, TimeProvider.ToLocal(context.DateTime), MillisecondsDisplay.None, CultureInfo.CurrentCulture))" Tooltip="true">
                @FormatHelpers.FormatTimeWithOptionalDate(TimeProvider, TimeProvider.ToLocal(context.DateTime))
            </TemplateColumn>

            @if (ShowPercentiles())
            {
                foreach (var (percentile, underlineColor) in percentileColumns)
                {
                    <TemplateColumn Title="@((_metricsView.FirstOrDefault() as HistogramMetricView)?.Percentiles[percentile].Name ?? (_instrument is not null ? $"P{percentile} {InstrumentUnitResolver.ResolveDisplayedUnit(_instrument, titleCase: true, pluralize: true)}" : $"P{percentile}"))">
                        @if (context is HistogramMetricView histogramMetric)
                        {
                            var percentileData = histogramMetric.Percentiles[percentile];

                            <span style="@($"text-decoration-thickness: 2px; text-decoration-line: underline; text-decoration-color: {underlineColor}; margin-right: 4px;")">
                                @percentileData.Value
                            </span>

                            if (GetIconAndTitleForDirection(percentileData.Direction) is var (icon, title))
                            {
                                <FluentIcon Style="vertical-align: text-bottom" Value="@icon" Title="@title"/>
                            }
                        }
                    </TemplateColumn>
                }
            }
            else if (_metrics.Values.All(value => value is MetricValueView))
            {
                <!-- if we're switching between grid types, this could be false -->
                <TemplateColumn Title="@_unitColumnHeader">
                    @{
                        var metricValueView = context as MetricValueView;
                    }

                    @if (metricValueView is null)
                    {
                        @Loc[nameof(ControlsStrings.Loading)]
                    }
                    else if (metricValueView.ValueChange is null)
                    {
                        @FormatMetricValue(metricValueView.Value)
                    }
                    else
                    {
                        <span style="margin-right: 4px;">@metricValueView.Value</span>
                        if (GetIconAndTitleForDirection(metricValueView.ValueChange) is var (icon, title))
                        {
                            <FluentIcon Style="vertical-align: text-bottom" Value="@icon" Title="@title"/>
                        }
                    }
                </TemplateColumn>
            }
            @if (_exemplars.Count > 0)
            {
                <TemplateColumn Title="@Loc[nameof(ControlsStrings.MetricTableExemplarsColumnHeader)]">
                    @if (context.Exemplars.Count > 0)
                    {
                        @* min-width ensures a consistent button width up to 999 metrics *@
                        <FluentButton Appearance="Appearance.Accent"
                                      aria-label="@Loc[nameof(ControlsStrings.MetricTableViewExemplarsLabel)]"
                                      @onclick="() => OpenExemplarsDialogAsync(context)"
                                      Style="min-width: 45px">@context.Exemplars.Count</FluentButton>
                    }
                    else
                    {
                        <span>0</span>
                    }
                </TemplateColumn>
            }
        </ChildContent>
        <EmptyContent>
            <FluentIcon Icon="Icons.Regular.Size24.ChartMultiple" />&nbsp;@Loc[nameof(ControlsStrings.MetricTableNoMetricsFound)]
        </EmptyContent>
    </FluentDataGrid>
</div>

<FluentStack Orientation="Orientation.Vertical">
    <FluentSwitch Class="table-switch"
                  @bind-Value="@OnlyShowValueChangesInTable"
                  @bind-Value:after="SettingsChangedAsync"
                  Label="@Loc[nameof(ControlsStrings.MetricTableShowOnlyValueChanges)]" />
</FluentStack>
